<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .demo01 {
            width: 540px;
        }
    
        .ele {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            margin: 0px 2px;
            /* border: 1px solid #000; */
            color: white;
        }
    
        .front {
            background-color: black;
    
        }
    
        .back {
            background-color: blue;
    
        }
    
        .float {
            float: left;
            position: relative;
            left: 11px;
            margin-right: 10px;
        }
    
        .demo02 {
            height: 40px;
            text-align: center;
            line-height: 40px;
            width: 50%;
            margin: auto;
        }
    
        a:first-child {
            float: left;
        }
    
        a:last-child {
            float: right;
    
        }
        .demo03 {
          margin: 0;
            padding: 0;
        
        }
        .demo03 li {
            list-style: none;
        }
        .demo03 .left {
           float: left;
            width: 350px;
            height: 500px;
margin-right: 15px;
            margin-top: 20px;
            background: url(07.jpg) no-repeat;
            background-size: cover;
            
        }
      
        
        .demo03  .right li{
            float: left;
            width: 200px;
            height: 230px;
            margin: 5px 0px;
            margin-top: 22px;
            transition: box-shadow 0.3s;
            background-size: cover;
        }
        .demo03  .right li:hover{
            box-shadow: 5px 5px 5px 5px #e7ce10;
        }
        .demo03::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
<h2>探究行元素环绕浮动元素</h2>
        <div class="demo01">
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="front ele">前</span>
            <span class="back ele">后</span>
            <img class="float" src="紫色星.png" alt="">
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
            <span class="back ele">后</span>
        </div>
        <br>
        <h2>浮动应用于居左居右</h2>
        <div class="demo02">
            <a href="#">上一章</a>
            西游记
            <a href="#">下一章</a>
        </div>
        <br>
        <h2>浮动应用于列表排列</h2>
<div class="demo03">
    <div class="left"><img src="07.jpg" width="350px"  height="500px" ></div>
    <div class="right">
        <ul>
            <li><img src="01.jpg" width="200px" height="230px"></li>
            <li><img src="02.jpg" width="200px" height="230px"></a></li>
            <li><img src="03.jpg" width="200px" height="230px"></a></li>
            <li><img src="06.jpg" width="200px" height="230px"></a></li>
            <li><img src="04.jpg" width="200px" height="230px"></li>
            <li><img src="05.jpg" width="200px" height="230px"></li>
        </ul>
    </div>
</div>
</body>
</html>